<template>
  <div v-if="status==='no'">
  <el-form :model="form" class="form" :rules="rules" ref="registerForm">
    <el-form-item >
<!--      <h1 style="margin: auto;">云水湾旅游景区</h1>-->
    </el-form-item>
    <el-form-item prop="username" >
      <el-input ref="username" v-model="form.username"  class="el-input-my" placeholder="用户名">
        <template #prefix>
          <i class="iconfont icon-yonghuming"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="emailAddress">
      <el-input  v-model="form.emailAddress"  class="el-input-my" placeholder="邮箱">
        <template #prefix>
          <i class="iconfont icon-youxiang"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input placeholder="密码"  v-model="form.password" class="el-input-my" >
        <template #prefix>
          <i class="iconfont icon-mima"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="checkPassword">
      <el-input placeholder="确认密码"  v-model="form.checkPassword" class="el-input-my" >
        <template #prefix>
          <i class="iconfont icon-querenmima"></i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="verify">
      <el-input placeholder="验证码"  v-model="form.verify" style="width: 175px" >
        <template #prefix>
          <i class="iconfont icon-yanzhengyanzhengma"></i>
        </template>
      </el-input>&nbsp;
      <el-button :disabled="disabled" type="text" @click="getVerify">获取验证码</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="login-button" @click="registerAccount('registerForm')">
        <i class="iconfont icon-zhuce"></i>&nbsp;
        注册
      </el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="text" style="margin: auto" @click="backToLogin">返回登录</el-button>
    </el-form-item>
  </el-form>
  </div>
  <div v-else style="width: 350px;height: 200px" >
    <el-result icon="success" title="注册成功" subTitle="请返回登录">
      <template #extra>
        <el-button type="primary"  @click="backToLogin">返回</el-button>
      </template>
    </el-result>
  </div>
</template>

<script>
import md5 from 'js-md5'
import {getCaptcha, register} from "@/api/user";
export default {
  name: "registerForm",
  data(){
    return{
      disabled:false,
      captcha:'',
      status:'no',
      form:{
        username:'',
        emailAddress:'',
        password:'',
        checkPassword:'',
        verify:''
      },
      rules:{
        username: [{ required: true, message: '用户名不能为空', trigger:['blur','change'] },
          {validator:(rule, value, callback) => {
              let reg = /^[a-zA-Z]{1,12}$/
              if (!reg.test(value)) {
                callback(new Error('目前用户名只支持1-12位字母组合'))
              } else if (value==='client' || value==='server') {
                callback(new Error('名称含有系统保留字段，请更换'))
              }else {
                callback()
              }
            },trigger:['blur','change']}],
        emailAddress: [
          { required: true, message: '邮箱地址不能为空', trigger:['blur','change'],
          },
        ],
        password: [
          {required: true, message:'密码不能为空',trigger:['blur','change']},
          {
            validator: (rule, value, callback) => {
              let reg = /^[0-9a-zA-Z]{6,15}$/
              if (!reg.test(value)) {
                callback(new Error('密码必须是由6-15位数字和字母组合'))
              } else {
                callback()
              }
            },trigger:'blur'
          }
        ],
        checkPassword: [
          {required: true, message:'内容不能为空', trigger:['blur','change']},
          {
            validator: (rule, value, callback) => {
              if (value!==this.form.password) {
                callback(new Error('两次输入不匹配'))
              } else {
                callback()
              }
            },trigger:['blur']
          }
        ],
        verify: [
          {required: true, message:'验证码不能为空', trigger: ['change','blur']},
          {validator: (rule, value, callback) => {
            if (this.captcha===''){
              callback(new Error('您还未获取验证码'))
            }
             else if (value!==this.captcha) {
                callback(new Error('验证码不正确'))
              } else {
                callback()
              }
            }, trigger: ['change','blur']}
        ]
      }
    }
  },
/*  mounted() {
    if (this.form.username === '') {
      this.$refs.username.focus()
    }
  },*/
  methods:{
    //调用父组件的@back修改 this.formType='loginForm'
    backToLogin(){
      this.$emit('back')
    },
    registerAccount(formName) {
      //form表单中加入了ref属性，用来获取form表单
      this.$refs[formName].validate((valid) => {
        //如果全部验证成功valid为true
        if (valid) {
          const getForm= {
            userName:this.form.username.trim(),
            userEmail:this.form.emailAddress,
            userPassword:md5(this.form.password),
          }
          register(getForm).then(res =>{
            this.status='ok'
          })
        } else {
          return false
        }
      })
    },
    //获取验证码
    getVerify(){
      if (this.form.emailAddress===''){
        this.$message({
          type:'warning',
          message:'邮箱地址为空'
        })
        return
      }
      const b = /^\w+@[\da-z\\.-]+\.([a-z]{2,6}|[\u2E80-\u9FFF]{2,3})$/.test(this.form.emailAddress);
      //验证邮箱格式
      if (!b){
        this.$message({
          type:'warning',
          message:'邮箱格式错误'
        })
        return
      }
      getCaptcha(this.form.emailAddress).then(res =>{
        this.disabled=true;
        this.captcha=res.data.verify;
      }).catch(error =>{
        console.log(error)
      })
      setTimeout(()=>{
        this.disabled=false;
      },5000)
    }
  }
}
</script>

<style scoped>

</style>
